<template>
   <el-container class="category-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">商品分类</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button  type="primary" icon="Plus" @click="addmodel()"
            >添加模版分类</el-button
          >
        </div>
      </div>
    </el-header>
   
    <div>
      <el-dialog
        width="800px"
        title="模板分类:"
        :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="分类名称:" :label-width="formLabelWidth">
            <el-input v-model="form.group_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否带音频:" :label-width="formLabelWidth">
            <template>
              <el-radio v-model="form.is_has_audio" :label="1">是</el-radio>
              <el-radio v-model="form.is_has_audio" :label="0">否</el-radio>
            </template>
          </el-form-item>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=""/>
          </el-dialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensure_one()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog width="800px" title="修改模板:" :visible.sync="changeVisible">
        <el-form :model="form">
          <el-form-item label="分类名称:" :label-width="formLabelWidth">
            <el-input v-model="form.group_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt=""/>
          </el-dialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensure_tow()">确 定</el-button>
        </div>
      </el-dialog>


      

      <el-table :data="listData" style="width: 100%">
        <el-table-column prop="group_name" label="模板名称"></el-table-column>
        <el-table-column prop="is_has_audio" label="是否携带音频">
          <template slot-scope="scope">
            <span v-if="scope.row.is_has_audio === 0" class="red">未携带</span>
            <span v-if="scope.row.is_has_audio === 1" class="green">携带</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="abandon(scope.row)"
            >修改
            </el-button>
            <el-popconfirm
              @confirm="cancel(scope.row)"
              title="这是一段内容确定删除吗？"
            >
              <el-button type="danger" size="mini" slot="reference"
              >删除
              </el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-container>
  </template>
  
  <script>
  // import request from "@/utils/request";
  // import FileApi from "../../api/file";
  
  export default {
    data() {
      return {
        listData: [],
        dialogImageUrl: "",
        dialogVisible: false,
        dialogFormVisible: false,
        changeVisible: false,
        add: false,
        change: false,
        accept: "",
        formdata: {
          video_name: "",
        },
        this_config: {
          /*上传个数*/
          total: 1,
          file_type: "image",
        },
        fileList: [],
        form: {
          group_name: "",
          is_has_audio: '',
          // group_id: "",
          app_id: "10001",
          group_id: ""
        },
        formLabelWidth: "120px",
      };
    },
    methods: {
      //添加
      addmodel() {
        this.add = true;
        this.dialogFormVisible = true;
      },
      //添加弹窗
      async ensure_one() {
        let res = request._post("/shop/video.TemGroup/addTemGroup", {
          group_name: this.form.group_name,
          is_has_audio: this.form.is_has_audio,
          app_id: this.form.app_id,
        });
        this.dialogFormVisible = false;
        console.log(res);
        await this.getList();
      },
      //修改弹窗
      async ensure_tow() {
        await request._post("/shop/video.TemGroup/updateTemGroup", {
          group_name: this.form.group_name,
          group_id: this.form.group_id,
          is_has_audio: this.form.is_has_audio,
          app_id: this.form.app_id,
        });
        this.changeVisible = false;
      },
      //删除
      async cancel(row) {
        let params = {group_id: row.group_id};
        const res = await request._post("/shop/video.TemGroup/deleteTemGroup", params);
        console.log(res);
        await this.getList();
      },
      //查询数据
      async getList() {
        const res = await request._post("/shop/video.TemGroup/selTemGroup");
        console.log(res);
        this.listData = res.data.list.data;
        console.log(this.listData);
      },
      // 修改
      abandon(row) {
        this.changeVisible = true;
        this.form = row;
      },
      /*选择图片之前*/
      onBeforeUploadImage(file) {
        return true;
      },
      /*选择上传图片*/
      fileChange(e) {
        console.log(e, "hahaha");
      },
      /*上传图片*/
      UploadImage1(param) {
        let self = this;
        const loading = this.$loading({
          lock: true,
          text: "图片上传中,请等待",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const formData = new FormData();
        formData.append("iFile", param.file);
        formData.append("group_id", self.activeType);
        formData.append("file_type", self.this_config.file_type);
        FileApi.uploadFile(formData).then((res) => {
          // res.data;
          console.log(res);
          this.form.tem_video = res.data;
          loading.close();
          param.onSuccess();
        });
      },
    },
    mounted() {
      this.getList();
    },
  };
  </script>
  
  <style>
  .video-avatar {
    width: 400px;
    height: 200px;
  }
  </style>
  